<ng-template #progressInfoTemplate>
  <span class="apes-progress-text" *ngIf="apesShowInfo">
    <ng-container *ngIf="status === 'exception' || (status === 'success' && !apesFormat); else formatTemplate">
      <i apes-icon [apesType]="icon"></i>
    </ng-container>
    <ng-template #formatTemplate>
      {{ formatter(apesPercent) }}
    </ng-template>
  </span>
</ng-template>
<div
  [ngClass]="'apes-progress apes-progress-status-' + status"
  [class.apes-progress-line]="apesType == 'line'"
  [class.apes-progress-small]="apesSize == 'small'"
  [class.apes-progress-show-info]="apesShowInfo"
  [class.apes-progress-circle]="isCircleStyle"
>
  <!-- Line progress -->
  <div *ngIf="apesType === 'line'">
    <div class="apes-progress-outer">
      <div class="apes-progress-inner">
        <div
          class="apes-progress-bg"
          [style.width.%]="apesPercent"
          [style.border-radius]="apesStrokeLinecap === 'round' ? '100px' : '0'"
          [style.background]="apesStrokeColor"
          [style.height.px]="strokeWidth"
        ></div>
        <div
          class="apes-progress-success-bg"
          [style.width.%]="apesSuccessPercent"
          [style.border-radius]="apesStrokeLinecap === 'round' ? '100px' : '0'"
          [style.height.px]="strokeWidth"
        ></div>
      </div>
    </div>
    <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
  </div>
  <!-- Circle/Dashboard progress -->
  <div
    [style.width.px]="this.apesWidth"
    [style.height.px]="this.apesWidth"
    [style.fontSize.px]="this.apesWidth * 0.15 + 6"
    class="apes-progress-inner"
    *ngIf="isCircleStyle"
  >
    <svg class="apes-progress-circle " viewBox="0 0 100 100">
      <path
        class="apes-progress-circle-trail"
        stroke="#f3f3f3"
        fill-opacity="0"
        [attr.stroke-width]="strokeWidth"
        [ngStyle]="trailPathStyle"
        [attr.d]="pathString"
      ></path>
      <path
        class="apes-progress-circle-path"
        [attr.d]="pathString"
        [attr.stroke-linecap]="apesStrokeLinecap"
        fill-opacity="0"
        [attr.stroke]="apesStrokeColor || statusColorMap[status]"
        [attr.stroke-width]="apesPercent ? strokeWidth : 0"
        [ngStyle]="strokePathStyle"
      ></path>
    </svg>
    <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
  </div>
</div>
